<!-- 记录体重 -->
<template>
<div class="container">
    <van-button v-show="showBack" icon="arrow-left" color="#888" plain style="border:none;" @click="$router.go(-1)">返回</van-button>

    <div class="round">
        <div style="font-size:2.5rem;font-weight: bold;">{{ valInt + '.' + (valFloat>9?valFloat:'0'+valFloat) }}</div>
        <div style="padding-top: 0.375rem;font-size: 1.25rem;">KG</div>
    </div>
    <!-- 体重整数部分 -->
    <div class="slider_box">
        <van-slider v-model="valInt" active-color="#cbe4b4" bar-height="0.625rem" min="30" max="120">
            <template #button>
                <div class="custom-button big-button">{{ valInt }}</div>
            </template>
        </van-slider>
        <div style="float: left;padding-top: 0.625rem;">30</div>
        <div style="text-align: right;padding-top: 0.625rem;">120</div>
    </div>
    <!-- 体重小数部分 -->
    <div class="slider_box">
        <van-slider v-model="valFloat" active-color="#e8f3de" bar-height="0.5rem" min="0" max="99">
            <template #button>
                <div class="custom-button">{{ valFloat }}</div>
            </template>
        </van-slider>
        <div style="float: left;padding-top: 0.625rem;">.00</div>
        <div style="text-align: right;padding-top: 0.625rem;">.99</div>
    </div>
    <!-- 按钮 -->
    <div class="btn" @click="submitWeight">记录体重</div>
</div>
</template>

<script>
import {
    apiRequest
} from '../../assets/js/axios_api'
export default {
    metaInfo() {
        return {
            title: '记录体重'
        }
    },
    name: 'RecWeight',
    data() {
        return {
            valInt: 50,
            valFloat: 0,
            weight: '',
            userInfo: {},
            showBack: false,
            fromPath: '',
        }
    },
    components: {

    },
    mounted() {
        console.log(this.fromPath)
        this.showBack = this.fromPath.includes('AnalyseWeight'); //从体重分析进入记录体重，则展示返回按钮，可返回。第一次登录体重必录，无返回按钮。

        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.weight = this.userInfo.weight;
        if (this.weight) {
            this.valInt = parseInt(this.weight);
            this.valFloat = this.weight.toString().split('.').length > 1 ? parseInt(this.weight.toString().split('.')[1]) : 0;
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.fromPath = from.name || ''
        })
    },
    methods: {
        submitWeight() {
            this.userInfo.weight = this.valInt + '.' + (this.valFloat > 9 ? this.valFloat : '0' + this.valFloat);
            let param = {
                "cusId": this.userInfo.cusId,
                "weight": this.userInfo.weight,
            }
            apiRequest(this, 'hmweightrecord', param, resData => {
                this.userInfo.bmi = parseFloat(this.userInfo.weight / ((this.userInfo.height / 100) * (this.userInfo.height / 100))).toFixed(2);
                sessionStorage.setItem('userInfo', JSON.stringify(this.userInfo));
                if (this.showBack) {
                    this.$router.push('/analyseweight')
                } else {
                    this.$router.push('/home')
                }
            }, 'post')
        }

    }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/common.less';

.container {
    .round {
        width: 10rem;
        height: 7.5rem;
        border-radius: 12.5rem;
        text-align: center;
        background: linear-gradient(to top, @light-color, @md-color);
        margin: 6.25rem auto;
        padding-top: 2.5rem;
        color: #666;
    }

    .btn {
        text-align: center;
        background-color: @btn-color;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.25rem 0;
        color: #fff;
    }

    .slider_box {
        padding: 1.875rem;

        .custom-button {
            width: 2.25rem;
            font-size: 0.75rem;
            line-height: 1.25rem;
            text-align: center;
            background-color: @btn-color;
            color: #fff;
            border-radius: 0.625rem;

            &.big-button {
                width: 2.5rem;
                background-color: @font-color;
            }
        }
    }
}
</style>
